<template>
  <view class="card-wrapper" :style="{ '--state-bg-color': state == 1 ? '#7737FE' : '#B3B3B3' }">
    <view class="app-header">
      <image src="/static/navImg/icon-app.svg" mode="scaleToFill" />
      <view class="app-info">
        <view class="app-title">
          <view class="app-name single-text-beyond">{{ appName }}</view>
          <view class="app-state">{{ state == 1 ? '已启用' : '已禁用' }}</view>
        </view>
        <view class="sub-title">{{ appId }}</view>
      </view>
    </view>
    <view class="mch-info">
      <view class="left">
        <image src="/pageWork/static/images/icon-mch-black.svg" mode="scaleToFill" />
        <view class="mch-title"> {{ mchName }} </view>
      </view>
      <view class="right"> {{ mchNo }}</view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  appName: { type: String }, //应用名称
  mchNo: { type: String }, // 商户号
  state: [String, Number], //状态
  appId: { type: String }, //应用id
  mchName: { type: String }, // 商户名称
})
</script>

<style lang="scss" scoped>
.card-wrapper {
  padding: 0.1rpx 30rpx;
  height: 257rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #ededed;
  .app-header {
    display: flex;
    margin-top: 30rpx;
    height: 92rpx;
    image {
      margin-right: 20rpx;
      width: 92rpx;
      height: 92rpx;
    }
    .app-info {
      flex: 1;
      .app-title {
        display: flex;
        justify-content: space-between;
        font-size: 30rpx;
        font-weight: 400;
        text {
          font-size: 33rpx;
          font-weight: 500;
        }
      }
      .app-name{
        width: 440rpx;
      }
      .app-state {
        display: flex;
        align-items: center;
        white-space: nowrap;
        font-size: 30rpx;
        color: #666;
        &::before {
          content: '';
          display: block;
          margin-right: 15rpx;
          width: 10rpx;
          height: 10rpx;
          border-radius: 50%;
          background-color: var(--state-bg-color);
        }
      }
    }
    .sub-title {
      margin-top: 15rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #808080;
    }
  }
  .mch-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    margin-top: 20rpx;
    height: 80rpx;
    background-color: #f7f7f7;
    border-radius: 10rpx;
    font-size: 29rpx;
    .left {
      display: flex;
      align-items: center;
      image {
        margin-right: 10rpx;
        width: 40rpx;
        height: 40rpx;
      }
      .mch-title {
        width: 232rpx;
      }
    }
    .right {
      color: #8c8c8c;
    }
  }
}
</style>
